<template>
  <div>
    <a-drawer
      :visible="visible"
      title="银行账号"
      placement="right"
      @close="cancelClick"
      width="600"
      :body-style="{
        height: 'calc(100% - 100px)',
        boxSizing: 'border-box',
        overflowY: 'auto',
      }"
    >
      <a-alert
        message="导入收支流水，会从此列表中匹配账户对应的租客信息，请认真维护此列表"
        type="warning"
      />
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #title>
          <a-row justify="end">
            <a-col>
              <a-button @click="bankAccountClick">
                <PlusOutlined />添加
              </a-button>
            </a-col>
          </a-row>
        </template>
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.key == 'action'">
            <a-space>
              <a-button type="link" @click="editBank(record)">编辑</a-button>
              <a-button type="text" danger @click="deleteBank(record)"
                >删除</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </a-drawer>

    <!-- 添加银行账户 -->
    <AddBankAccount
      :visible="bankAccountVisible"
      :invoiceId="id"
      :id="editId"
      :ownerId="ownerId"
      @successChange="successChange"
      @closeChange="bankAccountVisible = false"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  createVNode,
  onActivated,
  watch,
  computed,
  reactive,
  toRefs,
} from "vue";
import request from "@/common/utils/request";
import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import AddBankAccount from "./AddBankAccount.vue";
import { Form, message, Modal } from "ant-design-vue";

export default defineComponent({
  name: "BankAccount",
  components: { PlusOutlined, AddBankAccount, ExclamationCircleOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
    ownerId: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    const state = reactive({
      count: 0,
      columns: [
        {
          title: "开户银行",
          dataIndex: "bank_name",
          key: "bank_name",
        },
        {
          title: "开户账户",
          dataIndex: "bank_account",
          key: "bank_account",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
        },
      ],
      dataSource: [],
      loading: false,
      bankAccountVisible: false,
      editId: 0,

      page: 1,
      pageSize: 20,
      total: 0,
    });

    const cancelClick = () => {
      context.emit("closeChange");
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getBankList();
    };

    const getBankList = () => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
        invoice_title_id: props.id,
      };
      state.loading = true;
      request
        .get("/org", "/org/owner/bank/list", { ...params })
        .then((res) => {
          state.dataSource = res.list;
          state.total = res.total;
          state.loading = false;
        })
        .catch(() => {
          state.loading = false;
        });
    };

    const bankAccountClick = () => {
      state.editId = 0;
      state.bankAccountVisible = true;
    };

    const successChange = () => {
      state.bankAccountVisible = false;
      getBankList();
    };

    const editBank = (record) => {
      state.editId = record.id;
      state.bankAccountVisible = true;
    };

    const deleteBank = ({ id }) => {
      Modal.confirm({
        title: "确认删除该条银行账户吗？",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确认",
        cancelText: "取消",
        onOk() {
          request.del("/org", `/org/owner/bank/list/${id}`).then((res) => {
            message.success("删除成功");
            getBankList();
          });
        },
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getBankList();
        }
      }
    );

    return {
      ...toRefs(state),
      cancelClick,
      successChange,
      bankAccountClick,
      editBank,
      deleteBank,
      handleTableChange,
      pagination,
    };
  },
});
</script>

<style lang="scss" scoped></style>
